<template>
  <!--列表 竖直卡片 组件-->
  <div class="listItem" v-if="petList">
    <RouterLink to="">
      <div class="itemImg">
        <img v-lazy="petList.pet_images" alt="sds" />
      </div>
      <div class="itemTiter">
        <p>
          <strong>简介:</strong
          >{{
            petList.pet_intro ? `${petList.pet_intro}` : "暂无介绍"
          }}--点击查阅此宠物详情
        </p>
        <div class="itemTiterButton">
          <span>{{ petList.user_name }}</span>
          <span>{{ petList.pet_createtime.split("T")[0] }}</span>
        </div>
      </div>
    </RouterLink>
  </div>
</template>

<script>
export default {
  name: "ListItem",
  props: ["petList"],
};
</script>

<style scoped lang="less">
.listItem {
  //border: 1px solid blue;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  .itemImg {
    width: 100%;
    height: 55%;
    text-align: center;
    img {
      //width: 100%;
      height: 100%;
      max-width: 100%;
      //border: 1px dashed red;
    }
  }
  .itemTiter {
    width: 100%;
    height: 41%;
    display: flex;
    justify-content: space-evenly;
    flex-direction: column;
    box-sizing: border-box;
    padding-bottom: 0.3rem;
    //border: 1px dashed darkred;
    p {
      display: flex;
      align-items: center;
      width: 100%;
      //border: 1px solid red;
      margin: 0;
      color: #5f5f5f;
      text-indent: 1em;
      font-size: 0.86rem;
      padding: 0 0.5rem;
      box-sizing: border-box;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
      text-overflow: ellipsis;
      strong {
        color: #737373;
      }
    }
    .itemTiterButton {
      display: flex;
      justify-content: space-between;
      padding: 0 0.4rem;
      :nth-child(1) {
        font-weight: bold;
        color: #e29a51;
        font-size: 0.9rem;
      }
      :nth-child(2) {
        font-size: 0.8rem;
        color: #897a7a;
        margin-top: 0.2rem;
      }
    }
  }
}
</style>
